<template>
  <div>
    <div class="i_t mar_10">
      <span class="floor_num">{{ floorNumber }}F</span>
      <span class="fl" v-html="title"></span>
      <span class="i_mores fr">
        <template v-for="(link, index) in links" :key="index">
          <a href="#" @click.prevent="viewCategory(link.id)">{{ link.name }}</a>
          <span v-if="index < links.length - 1">&nbsp; &nbsp; | &nbsp; &nbsp;</span>
        </template>
      </span>
    </div>
    <div class="content">
      <div :class="leftClass">
        <div :class="bannerClass">
          <div :id="playId">
            <ul class="imgs" :id="actorId" ref="bannerList">
              <li v-for="(banner, index) in banners" :key="index">
                <a href="#" @click.prevent="viewBanner(banner.id)">
                  <img :src="banner.image" width="211" height="286" :alt="banner.title" />
                </a>
              </li>
            </ul>
            <div :class="prevClass" @click="scrollBanners('prev')">上一张</div>
            <div :class="nextClass" @click="scrollBanners('next')">下一张</div>
          </div>
        </div>
        <div class="fresh_txt">
          <div class="fresh_txt_c">
            <a href="#" v-for="(tag, index) in tags" :key="index" @click.prevent="viewTag(tag.id)">
              {{ tag.name }}
            </a>
          </div>
        </div>
      </div>
      <div class="fresh_mid">
        <ul>
          <li v-for="product in products" :key="product.id">
            <div class="name">
              <a href="#" @click.prevent="viewProduct(product.id)">{{ product.name }}</a>
            </div>
            <div class="price">
              <span style="color: #ff4e00;">￥<span>{{ product.price }}</span></span> &nbsp; {{ product.points || 0 }}R
            </div>
            <div class="img">
              <a href="#" @click.prevent="viewProduct(product.id)">
                <img :src="getProductImage(product)" width="185" height="155" :alt="product.name" @error="handleImageError" />
              </a>
            </div>
          </li>
        </ul>
      </div>
      <div class="fresh_right">
        <ul>
          <li v-for="(ad, index) in ads" :key="index">
            <a href="#" @click.prevent="viewAd(ad.id)">
              <img :src="ad.image" :width="ad.width" :height="ad.height" :alt="ad.title" />
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductFloor',
  props: {
    floorNumber: {
      type: Number,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    links: {
      type: Array,
      default: () => []
    },
    banners: {
      type: Array,
      default: () => []
    },
    tags: {
      type: Array,
      default: () => []
    },
    products: {
      type: Array,
      default: () => []
    },
    ads: {
      type: Array,
      default: () => []
    },
    // 用于生成CSS类名的标识符
    identifier: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentBannerIndex: 0
    }
  },
  computed: {
    leftClass() {
      // 根据楼层编号返回正确的CSS类名
      switch(this.floorNumber) {
        case 1:
          return 'fresh_left';
        case 2:
          return 'food_left';
        case 3:
          return 'make_left';
        case 4:
          return 'baby_left';
        case 5:
          return 'home_left';
        case 6:
          return 'tel_left';
        default:
          return `${this.identifier}_left`;
      }
    },
    bannerClass() {
      // 根据楼层编号返回正确的CSS类名
      switch(this.floorNumber) {
        case 1:
          return 'fre_ban';
        case 2:
          return 'food_ban';
        case 3:
          return 'make_ban';
        case 4:
          return 'baby_ban';
        case 5:
          return 'home_ban';
        case 6:
          return 'tel_ban';
        default:
          return `${this.identifier}_ban`;
      }
    },
    playId() {
      return `imgPlay${this.floorNumber}`;
    },
    actorId() {
      return `actor${this.floorNumber}`;
    },
    prevClass() {
      // 根据楼层编号返回正确的CSS类名
      switch(this.floorNumber) {
        case 1:
          return 'prevf';
        case 2:
          return 'prev_f';
        case 3:
          return 'prev_m';
        case 4:
          return 'prev_b';
        case 5:
          return 'prev_h';
        case 6:
          return 'prev_t';
        default:
          return `prev_${this.identifier.charAt(0)}`;
      }
    },
    nextClass() {
      // 根据楼层编号返回正确的CSS类名
      switch(this.floorNumber) {
        case 1:
          return 'nextf';
        case 2:
          return 'next_f';
        case 3:
          return 'next_m';
        case 4:
          return 'next_b';
        case 5:
          return 'next_h';
        case 6:
          return 'next_t';
        default:
          return `next_${this.identifier.charAt(0)}`;
      }
    }
  },
  methods: {
    viewCategory(id) {
      this.$emit('view-category', id)
    },
    viewBanner(id) {
      this.$emit('view-banner', id)
    },
    viewTag(id) {
      this.$emit('view-tag', id)
    },
    viewProduct(id) {
      this.$emit('view-product', id)
    },
    viewAd(id) {
      this.$emit('view-ad', id)
    },
    // 获取商品图片
    getProductImage(product) {
      if (product.fileName) {
        try {
          // 尝试返回实际图片路径
          return require(`@/assets/files/${product.fileName}`)
        } catch (error) {
          // 如果图片不存在，返回默认图片
          console.warn(`商品图片加载失败: ${product.fileName}`, error)
          return require('@/assets/images/default_product.jpg')
        }
      }
      // 如果没有fileName，返回默认图片
      return require('@/assets/images/default_product.jpg')
    },
    // 处理图片加载错误
    handleImageError(event) {
      event.target.src = require('@/assets/images/default_product.jpg')
    },
    // 滚动横幅
    scrollBanners(direction) {
      if (!this.banners || this.banners.length === 0) return
      
      if (direction === 'next') {
        if (this.currentBannerIndex < this.banners.length - 1) {
          this.currentBannerIndex++
        } else {
          // 循环到第一张
          this.currentBannerIndex = 0
        }
      } else if (direction === 'prev') {
        if (this.currentBannerIndex > 0) {
          this.currentBannerIndex--
        } else {
          // 循环到最后一张
          this.currentBannerIndex = this.banners.length - 1
        }
      }
      
      this.updateBannerPosition()
    },
    // 更新横幅位置
    updateBannerPosition() {
      this.$nextTick(() => {
        const container = this.$refs.bannerList
        if (container) {
          const itemWidth = 211 // 每个横幅的宽度
          container.style.transform = `translateX(-${this.currentBannerIndex * itemWidth}px)`
          container.style.transition = 'transform 0.3s ease'
        }
      })
    }
  },
  mounted() {
    // 初始化位置
    this.updateBannerPosition()
    
    // 如果有多个横幅，启动自动轮播
    if (this.banners && this.banners.length > 1) {
      this.autoPlayTimer = setInterval(() => {
        this.scrollBanners('next')
      }, 5000) // 每5秒切换一次
    }
  },
  beforeUnmount() {
    // 清理定时器
    if (this.autoPlayTimer) {
      clearInterval(this.autoPlayTimer)
    }
  },
  watch: {
    banners: {
      handler() {
        // 重置索引并更新位置
        this.currentBannerIndex = 0
        this.updateBannerPosition()
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
/* 使用项目现有样式 */
.imgs {
  transition: transform 0.3s ease;
  display: flex;
}
</style>